<template lang="html">
  <div class="main-page" id="store-page">
    <!-- 标题 -->
    <!-- <van-nav-bar class="main-header" title="银行卡管理" :left-arrow="true" :fixed="true" @click-left="onClickLeft" :z-index="11" /> -->
    <nav-bar :title="'银行卡管理'" @goBack="onClickLeft"/>
    <!-- 主体内容 -->
    <div class="main-content has-main-tabbar has-header-space">
     <div class="outer bank_outer">
      <div :class="bankList.length !== 0 ? 'bank_list' :''">
        <!-- <div v-for="(i, index) in bankList"  :index="index" :key="index" class="bank_item">
          <router-link :to="{path: '/merber/applyReflect', query: {ids: i.id}}">
          <img :src="'https://mjmh.meijiameihuo.com/wechat/images/bank/'+i.bank_code+'_big.png'" style="width:100%;height:116px;" alt="">
          </router-link>
          <span class="bank_item-text">{{i.bankcard_number}}</span>
          <span class="bank_item-text1" @click="delBank(i)">解绑</span>
        </div> -->
        <BankItem v-for="(i, index) in bankList" :item="i" action_txt="解绑" :key="index" action="delete"></BankItem>
      </div>
      <router-link :to="{path: '/merber/addBank', query: {u_id: this.u_id}}">
        <div class="add">
        <van-icon name="plus" class="add-card"/><span class="add-card">添加银行卡</span>
       </div>
      </router-link>
      <van-dialog id="van-dialog" />
      <van-toast id="van-toast" />
      </div>
    </div>
  </div>
</template>

<script>
// import Bank from './bank.js'
import NavBar from '@/components/global/nav-bar.vue'
import BankItem from '@/components/common/bankitem'

export default {
  components: { NavBar, BankItem },
  data () {
    return {
      active: 1,
      u_id: '',
      bankList: []
    }
  },
  created () {
    console.log(this.$route)
    this.u_id = this.$route.query.u_id
    this.getBankList()
  },
  mounted () {
    window['getUpload'] = () => {
      this.getBankList()
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    getBankList () {
      var data = {
        card_status: 0
      }
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'user_bankinfo', params: data, method: 'get' }).then((res) => { // 请求成功
          console.log(res)
          if (res.return_code === '0000') {
            this.bankList = res.data.list
          } else {
            console.log(res.return_msg)
          }
          resolve(res)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    delBank (ags) { // 解绑
      var data = { card_status: 2 }
      this.$dialog.confirm({
        // title: '确认解绑',
        message: '您确定要对的' + ags.bank_name + '尾号' + ags.bankcard_number.substr(-4) + '的储蓄卡进行解绑？',
        confirmButtonText: '确认解绑',
        cancelButtonText: '取消操作'
      }).then(() => {
        return new Promise((resolve, reject) => {
          this.$Axios({ url: 'user_bankinfo/' + ags.id, data, method: 'put' }).then((res) => { // 请求成功
            console.log(res)
            if (res.return_code === '0000') {
              this.$toast.success('解绑成功')
              // Toast.success('解绑成功')
              this.getBankList()
            } else {
              console.log(res.return_msg)
            }
            resolve(res)
          }).catch((error) => { // 请求失败
            this.$_requestInterceptor('error', error)
            reject(error)
          })
        })
      }).catch(() => {

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.bank_list{padding:20px 10px 0;text-align:center}
.bank_item{position:relative;margin-bottom:15px;background-size:100% 100%;}
.bank_item-text{position:absolute;bottom:30px;right:24%;font-size:14px;color:#fff}
.bank_item-text1{position:absolute;top:14px;right:19px;font-size:14px;color:#fff}
.add{height:40px;text-align:center;color:#dfc399;font-size:15px;background-color:#fff;margin:10px}
.add-card{line-height:40px;padding-right:10px}
</style>
